<template>
    <a-modal
      :bodyStyle="bodyStyle"
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="() => { $emit('cancel') }"
    >
      <a-tree-select
        showSearch
        allowClear
        :treeNodeFilterProp="'title'"
        style="width:100%"
        :treeData="treeData"
        :value="classifyId"
        @change="onChangeCategoryTree"
        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
        :showCheckedStrategy="SHOW_PARENT"
        placeholder="请选择图库分类"
      />
      <v-chart :options="polar"/>
      <v-chart :options="pie"/>
    </a-modal>
</template>
<script>
import serv from './ChartAnalysisService'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      treeData: [],
      SHOW_PARENT,
      classifyId: [],
      bodyStyle: { height: 400 },
      polar: {},
      pie: {}
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    visible: function (nvalue) {
      !nvalue || this.getTree()
    }
  },
  methods: {
    handleOk (e) {
      this.$emit('ok')
    },
    async getTree () {
      this.treeData = await serv.getTree()
    },
    onChangeCategoryTree (value) {
      if (value) {
        this.classifyId = value
        this.getPage({
          classifyId: value
        })
      } else {
        this.classifyId = []
      }
    },
    async getPage (params) {
      const page = await serv.getPage(params)
      const source = [['得票数', '图数量']]
      for (let {votes, cvote} of page.content) {
        source.push([votes, cvote])
      }
      this.polar = {
        title: {
          text: '投票统计'
        },
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: source
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {type: 'category'},
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [
          {type: 'bar'}
        ]
      }

      this.pie = {
        title: {
          text: '投票统计'
        },
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: source
        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [
          {
            type: 'pie',
            radius: 100
            // center: ['25%', '30%']
            // No encode specified, by default, it is '2012'.
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 400px;
}
</style>
